<template>
  <div>
    <menunav :nowactived=3></menunav>
    <div class="contanier">
      <div
        class="video-pick"
        v-for="(item, index) in message"
        :key="index"
      >

        <a
          href=""
          @click="govideo(item.Id)"
        >
          <img
            :src="item.img_url"
            alt=""
          >
        </a>
        <p><a
            href=""
            @click="govideo(item.Id)"
          > {{item.name}} </a> </p>
      </div>
    </div>
  </div>
</template>

<script>
import menunav from "./Nav";
export default {
  props: {},
  components: {},
  data() {
    return {
      message: [],
    };
  },
  created() {
    this.getvideolist();
  },
  methods: {
    async getvideolist() {
      let {
        data: { message },
      } = await this.Api.hotspot.getvideolist();
      this.message = message;
      console.log(message);
    },
    govideo(id) {
      this.$router.push(`/hotspot/video/${id}`);
    },
  },
  components: {
    menunav,
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0px;
  margin: 0;
}
.contanier {
  width: 1200px;
  height: 948px;
  background-color: rgb(255, 255, 255);
  margin: 40px auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .video-pick {
    width: 270px;
    height: 187px;
    background-color: #fff;
    margin: 20px 15px;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      a {
        text-decoration: none;
        color: inherit;
        font-weight: 600;
      }
    }
  }
}
</style>